<template>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-form-item label="业务模式" class="table-header-other">
        <div class="responsiveLayout">
          <!-- <selectDown
                  style="width: 70%"
                  v-model:modelData="data.portDepartureId"
                  placeholder="请选择"
                  urlType="CsShip"
                  :option="initOption.cmOption"
                >
                </selectDown> -->
          <el-select
            v-model="state.yxlx"
            placeholder="请选择"
            style="width: 70%"
            clearable
            filterable
            disabled
          >
            <el-option label="海运出口" value="海运出口"> </el-option>
          </el-select>
          <el-form-item
            label=""
            label-width="0"
            prop="fclLcl"
            style="width: 30%; margin-left: 8px; margin-bottom: 0px"
          >
            <el-select
              v-model="data.fclLcl"
              placeholder="托运类型"
              clearable
              filterable
            >
              <el-option label="整箱" value="整箱"> </el-option>
              <el-option label="拼箱" value="拼箱"> </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="服务内容" prop="seviceType">
        <el-checkbox-group v-model="data.seviceType">
          <el-checkbox label="订舱" :value="'订舱'" />
          <el-checkbox label="拖车（集卡拖车）" :value="'拖车（集卡拖车）'" />
          <el-checkbox label="进仓（干线物流）" :value="'进仓（干线物流）'" />
          <el-checkbox label="报关" :value="'报关'" />
        </el-checkbox-group>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-form-item label="委托单位" prop="requester">
        <selectDown
          v-model:modelData="data.requester"
          placeholder="请输入后搜索"
          urlType="crcontactcompany"
          urlQueryData="委托单位"
          @getOption="setRequesterCode"
          fit-input-width
          :labelSpaceBetween="true"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="委托单号" prop="consignmentNo">
        <el-input v-model="data.consignmentNo" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="货物来源">
        <selectDown
          v-model:modelData="data.cargoSource"
          placeholder="请输入后搜索"
          urlType="basedictdetail"
          urlQueryData="货物来源"
          :labelSpaceBetween="false"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="货好时间">
        <el-date-picker
          v-model="data.preDeliveryDate"
          type="date"
          placeholder="请选择"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-form-item label="订舱单位">
        <selectDown
          v-model:modelData="data.bookingParty"
          placeholder="请输入后搜索 "
          urlType="crcontactcompany"
          urlQueryData="订舱"
          :labelSpaceBetween="false"
          @getOption="setBookingPartyCode"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="签单方式" prop="billType">
        <selectDown
          v-model:modelData="data.billType"
          placeholder="请选择"
          urlType="basedictdetail"
          urlQueryData="签单方式"
          :labelSpaceBetween="false"
          :remoteShowSuffix="true"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="签单份数" prop="originalBillNumber">
        <div class="responsiveLayout">
          <el-input
            v-model="data.originalBillNumber"
            style="max-width: 48%"
            placeholder="正本数"
            @input="
              data.originalBillNumber = validateNumber(data.originalBillNumber)
            "
          >
            <!-- <template #append>正本份数</template> -->
          </el-input>
          <el-input
            v-model="data.originalBillCopyNumber"
            style="max-width: 48%; margin-left: 4%"
            placeholder="副本数"
            @input="
              data.originalBillCopyNumber = validateNumber(
                data.originalBillCopyNumber
              )
            "
          >
            <!-- <template #append>副本份数</template> -->
          </el-input>
        </div>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="签单地点">
        <el-input v-model="data.signingLocation" placeholder="请填写签单地址">
        </el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-form-item label="订舱代理">
        <selectDown
          v-model:modelData="data.bookingAgent"
          placeholder="请输入后搜索"
          urlType="crcontactcompany"
          urlQueryData="订舱"
          @getOption="setBookAgentCodeCode"
          :labelSpaceBetween="false"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="运输条款">
        <div class="responsiveLayout">
          <docSelects
            v-model:modelData="data.carriageConditions"
            placeholder="请选择"
            :option="$store.state.businessBaseData.baseData['transterm']"
            fit-input-width
          >
          </docSelects>
        </div>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="付款方式">
        <docSelects
          v-model:modelData="data.payment"
          placeholder="请选择"
          :option="$store.state.businessBaseData.baseData['CsPaymentMode']"
          fit-input-width
        >
        </docSelects>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="付款地点">
        <el-input
          v-model="data.payPlace"
          placeholder="请输入"
          @keydown="parseInput"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-form-item label="船公司">
        <selectDown
          v-model:modelData="data.shipowner"
          placeholder="请输入后搜索"
          urlType="CsShipCompany"
          :labelSpaceBetween="false"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="起运港" prop="loadingPort">
        <selectDown
          v-model:modelData="data.loadingPort"
          placeholder="请输入后搜索"
          urlType="port"
          @getOption="setLoadingPortCode"
          :option="initOption.loadingPortList"
          fit-input-width
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="装货地点">
        <selectDown
          v-model:modelData="data.receiptPlace"
          placeholder="请输入后搜索"
          urlType="port"
          :option="initOption.receiptPlaceList"
          fit-input-width
          @getOption="setReceiptPlaceCode"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="中转港">
        <selectDown
          v-model:modelData="data.transshipmentPort"
          placeholder="请输入后搜索"
          urlType="port"
          fit-input-width
          @getOption="setTransshipmentPortCode"
          :option="initOption.transshipmentPortList"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-form-item label="港口航线">
        <selectDown
          v-model:modelData="data.portRoute"
          placeholder="请输入后搜索"
          urlType="tradelane"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="目的港" prop="dischargePort">
        <selectDown
          v-model:modelData="data.dischargePort"
          placeholder="请输入后搜索"
          urlType="port"
          @getOption="setDischargePortCode"
          fit-input-width
          :option="initOption.dischargePortList"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="卸货地点">
        <selectDown
          v-model:modelData="data.unloadingPlace"
          placeholder="请输入后搜索"
          urlType="port"
          @getOption="setUnloadingPlaceCode"
          fit-input-width
          :option="initOption.unloadingPlaceList"
          :remoteShowSuffix="false"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="目的地" prop="finalDestination">
        <selectDown
          v-model:modelData="data.finalDestination"
          placeholder="请输入后搜索"
          urlType="port"
          @getOption="setFinalDestinationCode"
          :remoteShowSuffix="false"
          fit-input-width
          :option="initOption.finalDestinationList"
        >
        </selectDown>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-form-item label="货物类型" prop="cargoType">
      <el-radio-group v-model="data.cargoType" @change="changeCagron">
        <el-radio :value="'普货'">普货</el-radio>
        <el-radio :value="'特种货'">特种货</el-radio>
      </el-radio-group>

      <div v-if="data.showCheck">
        <!-- <el-checkbox-group v-model="data.cargonList" @change="checkChange"> -->
        <el-checkbox v-model="data.isCold">冷藏品</el-checkbox>
        <el-checkbox v-model="data.isDanger">危险品</el-checkbox>
        <el-checkbox v-model="data.isOog">OOG</el-checkbox>
        <!-- </el-checkbox-group> -->
      </div>
    </el-form-item>
  </el-row>
  <el-row :gutter="24" v-if="data.isCold">
    <el-col :span="6">
      <el-form-item label="冷藏温度" prop="coldTemp">
        <div class="responsiveLayout">
          <el-input
            v-model="data.coldTemp"
            style="width: 70%"
            placeholder="请输入"
            clearable
            @input="data.coldTemp = validateOnlyNumberTwo(data.coldTemp)"
          ></el-input>
          <el-select
            v-model="data.coldTempUnit"
            style="width: 30%; margin-left: 8px"
            size="small"
            filterable
            placeholder="单位"
          >
            <el-option value="C" label="C"> </el-option>
            <el-option value="F" label="F"> </el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="通风量" prop="ventilationRate">
        <div class="responsiveLayout">
          <el-input
            v-model="data.ventilationRate"
            style="width: 70%"
            placeholder="请输入"
            @input="
              data.ventilationRate = validateOnlyNumberTwo(data.ventilationRate)
            "
            clearable
          ></el-input>
          <el-select
            style="width: 30%; margin-left: 8px"
            v-model="data.ventilationRateUnit"
            size="small"
            filterable
            placeholder="单位"
          >
            <el-option
              v-for="(item, index) in state.options"
              :key="index"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24" v-if="data.isDanger">
    <el-col :span="6">
      <el-form-item label="UN NO" prop="unno">
        <el-input v-model="data.unno" placeholder="请输入" clearable></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="CLASS NO" prop="type">
        <el-input v-model="data.type" placeholder="请输入" clearable></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="闪点" prop="flashTemp">
        <div class="responsiveLayout">
          <el-input
            v-model="data.flashTemp"
            style="width: 70%"
            placeholder="请输入"
            clearable
          ></el-input>
          <el-select
            v-model="data.flashTempUnit"
            size="small"
            filterable
            placeholder="单位"
            style="width: 30%; margin-left: 8px"
          >
            <el-option value="C"> </el-option>
            <el-option value="F"> </el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24" v-if="data.isOog">
    <el-col :span="6">
      <el-form-item label="尺寸单位" prop="cargoUnit">
        <el-input
          v-model="data.cargoUnit"
          placeholder="请输入"
          clearable
          filterable
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="超限-前" prop="overFrontLength">
        <el-input
          v-model="data.overFrontLength"
          placeholder="请输入"
          clearable
          filterable
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="超限-后" prop="overBackLength">
        <el-input
          v-model="data.overBackLength"
          placeholder="请输入"
          clearable
          filterable
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="超限-左" prop="overLeftLength">
        <el-input
          v-model="data.overLeftLength"
          placeholder="请输入"
          clearable
          filterable
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24" v-if="data.isOog">
    <el-col :span="6">
      <el-form-item label="超限-右" prop="overRightLength">
        <el-input
          v-model="data.overRightLength"
          placeholder="请输入"
          clearable
          filterable
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="超限-高" prop="overHeightLength">
        <el-input
          v-model="data.overHeightLength"
          placeholder="请输入"
          clearable
          filterable
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <!-- <el-collapse-transition v-show="expand">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="BOOKING">
                <docSelects
                  v-model:modelData="data.settleType"
                  placeholder="请选择"
                  :option="
                    $store.state.businessBaseData.dictData['sys_settle_type']
                  "
                  fit-input-width
                >
                </docSelects>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="成交方式">
                <docSelects
                  v-model:modelData="data.settleType"
                  placeholder="请选择"
                  :option="
                    $store.state.businessBaseData.dictData['sys_settle_type']
                  "
                  fit-input-width
                >
                </docSelects>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="贸易性质">
                <docSelects
                  v-model:modelData="data.settleType"
                  placeholder="请选择"
                  :option="
                    $store.state.businessBaseData.dictData['sys_settle_type']
                  "
                  fit-input-width
                >
                </docSelects>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报关单位">
                <selectDown
                  v-model:modelData="data.shipcompanyId"
                  placeholder="请输入后搜索"
                  urlType="CsShipCompany"
                  urlQueryData="船公司"
                  :option="initOption.cgsOption"
                  @getOption="getVesselCompanyData"
                  :labelSpaceBetween="true"
                  :remoteShowSuffix="false"
                >
                </selectDown>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-transition>

        <div class="expand-icon">
          <span @click.stop="expanIcon" style="cursor: pointer">{{
            expand ? '收起' : '展开'
          }}</span>
          <el-icon
            color="#5a9cf8"
            class="collapse"
            style="cursor: pointer"
            @click.stop="expanIcon"
            :class="expand ? 'rotate' : ''"
            ><ArrowDown
          /></el-icon>
        </div> -->
  <!-- <el-row :gutter="8">
          <el-col :span="6">
            <el-form-item label="海口航线">
              <selectDown
                v-model:modelData="data.portDischargeId"
                placeholder="请输入后搜索"
                urlType="port"
                :option="initOption.xhgOption"
                @getOption="getPortDischargeName"
                @handleChange="portDischargeChange"
                fit-input-width
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="订舱备注">
              <el-input
                v-model="data.bookingMemo"
                type="textarea"
                :rows="2"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
  <!-- <div class="middle-box">
        <span class="title"> 配舱信息 </span>
        <span class="fold" @click="foldAllocation">{{
          allocationInfoIsShow ? '收起' : '展开'
        }}</span>
      </div> v-show="allocationInfoIsShow"  -->

  <el-row>
    <el-col>
      <el-form-item label="箱型箱量" class="table-header">
        <div class="responsiveLayout">
          <el-input
            v-model="data.formatBoxs"
            style="width: 100%"
            placeholder="箱型箱量"
            clearable
            disabled
          ></el-input>
          <el-button type="text" @click="addBox"> 修改 </el-button>
        </div>
        <!-- <div class="box-container">
          <div class="box-item">
            <div
              v-for="(item, index) in data.containerSums"
              :key="index"
              style="margin-bottom: 8px"
              class="box-item-fill"
            >
              <el-form-item
                label=""
                label-width="0"
                :prop="'containerSums.' + index + '.ctnType'"
                :rules="{
                  required: true,
                  message: '请选择箱型',
                  trigger: 'change'
                }"
              >
                <selectDown
                  v-model:modelData="item.ctnType"
                  placeholder="请选择"
                  urlType="csContainer"
                  style="width: 120px"
                  fit-input-width
                  :clearable="false"
                >
                </selectDown>
              </el-form-item>
              <el-form-item
                label=""
                label-width="0"
                :prop="'containerSums.' + index + '.ctnDigit'"
                :rules="{
                  required: true,
                  message: '请输入箱量',
                  trigger: 'blur'
                }"
              >
                <el-input-number
                  v-model="item.ctnDigit"
                  placeholder="请输入"
                  :precision="0"
                  style="width: 120px; margin-left: 4px"
                  :min="1"
                />
              </el-form-item>
              <el-icon
                v-if="index == data.containerSums.length - 1 && index != 0"
                @click.stop="moveTableData(item)"
                class="delete-icon"
                :size="12"
                ><CircleCloseFilled
              /></el-icon>
            </div>

            <div class="flex-container">
              <div class="add-use-box-info-new" @click="addUseBoxInfo">
                <el-icon style="font-size: 15px"><Plus /></el-icon
                ><span class="addFont">新增</span>
              </div>
            </div>
          </div>
        </div> -->
      </el-form-item>
    </el-col>
  </el-row>
  <!-- </div> -->
  <el-row :gutter="24">
    <el-col :span="6" class="input-number-style">
      <el-form-item label="总件数" prop="pkgs">
        <el-input-number
          v-model="data.pkgs"
          placeholder="请输入件数"
          :precision="0"
          :controls="false"
        />
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="总包装" prop="packageType">
        <selectDown
          v-model:modelData="data.packageType"
          placeholder="请选择"
          urlType="CsPackageType"
          :fit-input-width="false"
          :autoWidth="true"
        >
        </selectDown>
      </el-form-item>
    </el-col>
    <el-col :span="6" class="input-number-style">
      <el-form-item label="总毛重" prop="grossWeight">
        <el-input-number
          v-model="data.grossWeight"
          placeholder="请输入"
          :precision="2"
          :controls="false"
        />
      </el-form-item>
    </el-col>
    <el-col :span="6" class="input-number-style">
      <el-form-item label="总体积" prop="measurement">
        <el-input-number
          v-model="data.measurement"
          placeholder="请输入"
          :precision="2"
          :controls="false"
        />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="24">
      <el-form-item label="HS CODE" prop="hscode">
        <el-input v-model="data.hscode" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="24">
    <el-col :span="8">
      <el-form-item label="唛头" prop="marks">
        <el-input
          v-model="data.marks"
          type="textarea"
          :rows="6"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="英文品名" prop="cargoName">
        <el-input
          v-model="data.cargoName"
          type="textarea"
          :rows="6"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="中文品名">
        <el-input
          v-model="data.cargoNameCn"
          type="textarea"
          :rows="6"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <!-- <div class="message-input-container"> -->
  <el-row :gutter="24">
    <el-col :span="8">
      <el-form-item label="发货人" prop="shipper">
        <template #label>
          <div class="flex-column">
            <div class="first-title">发货人</div>
            <span class="choice" @click="openBLDialog('发货人')">选择</span>
          </div>
        </template>
        <el-input
          v-model="data.shipper"
          type="textarea"
          :rows="6"
          placeholder="请填写发货人信息"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="收货人" prop="consignee">
        <template #label>
          <div class="flex-column">
            <div class="first-title">收货人</div>
            <span class="choice" @click.stop="openBLDialog('收货人')"
              >选择</span
            >
          </div>
        </template>
        <el-input
          v-model="data.consignee"
          type="textarea"
          :rows="6"
          placeholder="请填写收货人信息"
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="通知人" prop="notifyPerson">
        <template #label>
          <div class="flex-column">
            <div class="first-title">通知人</div>
            <span class="choice" @click.stop="openBLDialog('通知人')"
              >选择</span
            >
          </div>
        </template>
        <el-input
          v-model="data.notifyPerson"
          type="textarea"
          :rows="6"
          placeholder="请填写通知人信息"
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8" v-if="data.showSecondPerson" style="margin-top: 8px">
      <el-form-item label="第二通知人" prop="secondPerson">
        <template #label>
          <div class="flex-column">
            <div class="first-title">第二通知人</div>
            <span class="choice" @click.stop="openBLDialog('通知人', 2)"
              >选择</span
            >
          </div>
        </template>
        <el-input
          v-model="data.secondPerson"
          type="textarea"
          :rows="6"
          placeholder="请填写第二通知人信息"
        >
        </el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <div class="flex-container" style="margin-bottom: 10px">
    <el-form-item label="">
      <div
        class="add-use-box-info-new"
        @click="addSecondPerson('add')"
        v-if="!data.showSecondPerson"
      >
        <el-icon style="font-size: 15px"><Plus /></el-icon
        ><span class="addFont">添加第二通知人 </span>
      </div>
      <div
        class="add-use-box-info-new"
        @click="addSecondPerson('delete')"
        v-if="data.showSecondPerson"
      >
        <el-icon style="font-size: 15px"><Plus /></el-icon
        ><span class="addFont"> 移除第二通知人 </span>
      </div>
    </el-form-item>
  </div>
  <el-row :gutter="24" class="no-bottom">
    <el-col :span="16">
      <el-row>
        <el-col>
          <el-form-item label="订舱备注">
            <el-input
              v-model="data.memo"
              type="textarea"
              :rows="2"
              placeholder="请填写其他订舱备注信息"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="8">
      <el-row>
        <el-col>
          <el-form-item label="其他备注">
            <el-input
              v-model="data.otherRemark"
              type="textarea"
              :rows="2"
              placeholder="若有其他需求备注，请填写"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-dialog v-model="state.show" title="箱型箱量" width="530px">
    <div style="height: 100%">
      <el-form
        ref="addFormRef"
        label-suffix=":"
        :model="data"
        label-width="90px"
        :show-message="false"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="箱型箱量" class="table-header">
              <el-row
                v-for="(item, index) in data.containerSumsCopy"
                :key="index"
                style="width: 100%"
              >
                <el-col :span="24">
                  <div style="display: flex; align-items: center; width: 100%">
                    <div class="box-contaienr-input">
                      <el-form-item
                        label=""
                        label-width="0"
                        style="width: 50%"
                        :prop="'containerSumsCopy.' + index + '.ctnType'"
                        :rules="{
                          required: true,
                          message: '请选择箱型',
                          trigger: 'change'
                        }"
                      >
                        <selectDown
                          v-model:modelData="item.ctnType"
                          placeholder="请选择"
                          urlType="csContainer"
                          fit-input-width
                          :indexOfBox="index"
                          :clearable="false"
                          @getOption="setBoxTypeTeu"
                        >
                        </selectDown>
                      </el-form-item>
                      <el-form-item
                        label=""
                        label-width="0"
                        style="margin-left: 4px; width: 50%"
                        :prop="'containerSumsCopy.' + index + '.ctnDigit'"
                        :rules="{
                          required: true,
                          message: '请输入箱量',
                          trigger: 'blur'
                        }"
                      >
                        <el-input-number
                          v-model="item.ctnDigit"
                          placeholder="请输入"
                          :precision="0"
                          :min="1"
                          @change="checkChangeNumber(item.ctnDigit, index)"
                        />
                      </el-form-item>
                    </div>
                    <div v-if="!isBooking">
                      <el-button
                        type="text"
                        v-if="
                          index == data.containerSums.length - 1 && index != 0
                        "
                        @click="moveTableData(item)"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <div class="flex-container">
                <div class="add-use-box-info-new" @click="addUseBoxInfo">
                  <el-icon style="font-size: 15px"><Plus /></el-icon
                  ><span class="addFont">新增</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div>
        <el-button type="default" @click="cancleSub">取消</el-button>
        <el-button type="primary" @click="saveData">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <docDetailFillShipperNew ref="BLDialog" @choose="getBLTitle">
  </docDetailFillShipperNew>
</template>

<script setup>
import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import request from '@/public/request'
import selectDown from '../newBusiness/selectDownNew.vue'
import vueBus from '@/utils/vueBus'
import docSelects from './../components/docSelects.vue'
import docDetailFillShipperNew from './docDetailFillShipperNew.vue'
import { validateOnlyNumberTwo, validateNumber } from '@/utils/validate.js'

//判断当前打开的是否是业务列表
const props = defineProps({
  detailData: {
    type: Object,
    defalut: () => {}
  }, //初始化option
  initOption: {
    type: Object,
    default: () => {}
  },
  // 是否已订舱
  isBooking: {
    type: Boolean,
    default: () => {}
  }
})

// 弹框的form表单
const addFormRef = ref(null)
const BLDialog = ref(null)

const state = reactive({
  yxlx: '海运出口',
  show: false,
  showCheck: false,
  cargonList: [],
  showCold: false,
  showDranger: false,
  showOog: false,
  options: [
    {
      value: '开',
      label: '开'
    },
    {
      value: '关',
      label: '关'
    },
    {
      value: '半开',
      label: '半开'
    },
    {
      value: 10,
      label: '10'
    },
    {
      value: 20,
      label: '20'
    },
    {
      value: 30,
      label: '30'
    },
    {
      value: 40,
      label: '40'
    },
    {
      value: 50,
      label: '50'
    },
    {
      value: 60,
      label: '60'
    },
    {
      value: 70,
      label: '70'
    },
    {
      value: 80,
      label: '80'
    }
  ],
  secondeShow: false
})

//  货物类型切换
function changeCagron() {
  if (props.detailData.cargoType == '普货') {
    props.detailData.showCheck = false
  } else {
    props.detailData.showCheck = true
  }
}

defineExpose({
  changeCagron,
  checkChange
})

function setBoxTypeTeu(data, index) {
  props.detailData.containerSumsCopy[index].tareWeight = data.teu ? data.teu : 1
}

function checkChangeNumber(val, index) {
  if (props.isBooking) {
    if (
      props.detailData.containerSumsCopy[index].ctnDigit <
      props.detailData.containerSums[index].ctnDigit
    ) {
      props.detailData.containerSumsCopy[index].ctnDigit =
        props.detailData.containerSums[index].ctnDigit
    }
  }
}

/**
 * 选择收发货人选取
 * @param {object} bldata - 组件选取数据
 */
function getBLTitle(bldata, type, second) {
  let bldataKeys = Object.keys(bldata)
  const unNeedKey = [
    'code',
    'enterpriseName',
    'address',
    'contactEnglish',
    'telephone',
    'fax'
  ]
  let dataFormat = ''
  bldataKeys.forEach((item, index) => {
    if (unNeedKey.indexOf(item) != -1) {
      if (!dataFormat) {
        dataFormat += bldata[item]
      } else {
        dataFormat += bldata[item] ? '\n' + bldata[item] : ''
      }
    }
  })
  switch (type) {
    case '发货人':
      props.detailData.shipper = dataFormat
      break
    case '收货人':
      props.detailData.consignee = dataFormat
      break
    case '通知人':
      if (second) {
        props.detailData.secondPerson = dataFormat
      } else {
        props.detailData.notifyPerson = dataFormat
      }
      break
  }
}

// 增加箱型箱量
function addBox() {
  state.show = true
}

/**
 * 将option.rigthName
 * @param {object} item - 委托单位下拉选择的option
 */
function setRequesterCode(item) {
  props.detailData.requesterCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 订舱单位下拉选择的option
 */
function setBookingPartyCode(item) {
  props.detailData.bookingPartyCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 订舱代理下拉选择的option
 */
function setBookAgentCodeCode(item) {
  props.detailData.bookAgentCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 装货港下拉选择的option
 */
function setLoadingPortCode(item) {
  props.detailData.loadingPortCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 中转港下拉选择的option
 */
function setTransshipmentPortCode(item) {
  props.detailData.transshipmentPortCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 装货地点港下拉选择的option
 */
function setReceiptPlaceCode(item) {
  props.detailData.receiptPlaceCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 卸货港下拉选择的option
 */
function setDischargePortCode(item) {
  props.detailData.dischargePortCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 卸货地点下拉选择的option
 */
function setUnloadingPlaceCode(item) {
  props.detailData.unloadPlaceCode = item.rigthName
}
/**
 * 将option.rigthName
 * @param {object} item - 目的地下拉选择的option
 */
function setFinalDestinationCode(item) {
  props.detailData.finalDestinationCode = item.rigthName
}

// 特种货物勾选
function checkChange() {
  if (props.detailData.cargonList.indexOf(1) != -1) {
    state.showCold = true
  } else {
    state.showCold = false
  }
  if (props.detailData.cargonList.indexOf(2) != -1) {
    state.showDranger = true
  } else {
    state.showDranger = false
  }
  if (props.detailData.cargonList.indexOf(3) != -1) {
    state.showOog = true
  } else {
    state.showOog = false
  }
}

/**
 * 保存当前填写的用箱信息
 */

async function saveData() {
  let falg = false
  for (let i = 0; i <= props.detailData.containerSumsCopy.length - 1; i++) {
    await addFormRef.value.validateField(
      ['containerSumsCopy.' + i + '.ctnType'],
      (value) => {
        falg = value
      }
    )
  }
  if (falg) {
    let boxTypeObj = {}
    for (const iterator of props.detailData.containerSumsCopy) {
      let boxKeysList = Object.keys(boxTypeObj)
      if (boxKeysList.indexOf(iterator.ctnType) != -1) {
        boxTypeObj[iterator.ctnType] += iterator.ctnDigit
      } else {
        boxTypeObj[iterator.ctnType] = iterator.ctnDigit
      }
    }
    let operationKeysList = Object.keys(boxTypeObj)
    let boxtypeOfNumber = ''
    operationKeysList.forEach((value, index) => {
      boxtypeOfNumber =
        boxtypeOfNumber + '' + value + 'X' + boxTypeObj[value] + ';'
    })
    boxtypeOfNumber = boxtypeOfNumber.substr(0, boxtypeOfNumber.length - 1)
    props.detailData.formatBoxs = boxtypeOfNumber
    state.show = false
  }
}

function cancleSub() {
  state.show = false
  let filterBox = []
  for (const cpoyItem of props.detailData.containerSumsCopy) {
    if (cpoyItem.ctnType) {
      filterBox.push(cpoyItem)
    }
  }
  props.detailData.containerSumsCopy = filterBox
}

function moveTableData(row) {
  let newArr = props.detailData.containerSumsCopy.filter(
    (item) => item.index != row.index
  )
  props.detailData.containerSumsCopy = newArr
}

/**
 * 添加第二通知人
 */
function addSecondPerson(type) {
  if (type == 'add') {
    props.detailData.showSecondPerson = true
  } else {
    props.detailData.secondPerson = ''
    props.detailData.showSecondPerson = false
  }
}

// 当前选择的属于哪个类型
async function openBLDialog(type, seconde) {
  BLDialog.value.open(type, seconde)
}

/**
 * 添加用箱信息按钮点击事件
 */
async function addUseBoxInfo() {
  props.detailData.containerSumsCopy.push({
    id: 0,
    index: props.detailData.containerSumsCopy.length + 1,
    bookingId: 0,
    ctnType: '',
    ctnDigit: 1,
    tareWeight: 1,
    isDeleted: false,
    ctnOwner: ''
  })
}

// watch(
//   () => props.detailData,
//   (newValue) => {
//     if (props.detailData.secondPerson) {
//       state.secondeShow = true
//     } else {
//       state.secondeShow = false
//     }
//   },
//   { immediate: false, deep: true }
// )

const data = computed({
  get() {
    return props.detailData
  },
  set(value) {
    emits('update:detailData', value)
  }
})

const emits = defineEmits(['update:detailData'])

const Router = useRouter()
const Route = useRoute()
const store = useStore()
</script>

<style lang="scss" scoped>
.container {
  :deep(.el-form-item) {
    margin: 0;
  }

  :deep(.el-row) {
    margin-bottom: 8px;
  }

  .middle-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    background: #f5f8f7;
    padding: 2px 8px;

    .label {
      // border-left: 2px solid #5d9df5;
      // margin-left: 12px;
      // padding-left: 4px;
      // color: #000000;
      // font-family: PingFang SC;
      // font-weight: bold;
      // font-size: 14px;
      // letter-spacing: 0px;
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .tempalte-text {
      color: #5a9cf8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      letter-spacing: 0px;
      margin-left: 12px;
      cursor: pointer;
    }

    .fold,
    .expand {
      color: #5e9ef5;
      cursor: pointer;
    }

    .btn {
      cursor: pointer;
      color: #0063b9;
      margin: 0 16px 0 8px;
    }

    :deep(.el-checkbox) {
      margin-left: 16px;
    }
  }
  .no-data {
    width: 100%;
    margin-bottom: 16px;
    color: #000000;
    opacity: 0.4;

    font-family: PingFang SC;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0px;
    text-align: center;
  }

  .message-input-container:first-child {
    // border-top: none;
    // padding-top: 12px;
  }

  .message-input-container {
    width: 100%;
    // padding: 8px 12px 0px;
    // border-top: 8px solid #f8f8f8;
    :deep(.el-table .el-table__header-wrapper th) {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
    }

    .expand-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      span {
        color: #5a9cf8;
        font-family: PingFang SC;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        margin-right: 4px;
      }
    }
    .rotate {
      transform: rotate(-180deg);
    }
    .collapse {
      transition: all 0.5s ease;
    }
    .no-bottom {
      margin-bottom: 0px;
    }
  }

  :deep(.el-input-group__append, .el-input-group__prepend) {
    padding: 0 8.5px;
    background-color: #f8f8f8;
  }

  .no-border-top {
    border-top: none;
  }

  .middle-box:not(.special) {
    justify-content: space-between;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;

    .first-title {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
      cursor: pointer;
    }

    .sencond-title {
      color: #000000;
      opacity: 0.4;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
      cursor: pointer;
    }
  }

  .responsiveLayout {
    width: 100%;
    display: flex;
  }

  ::v-deep .el-input-number__decrease {
    background-color: #fff;
    border-right: none;
  }
  ::v-deep .el-input-number__increase {
    background-color: #fff;
    border-left: none;
  }

  .choice {
    color: #5a9cf8;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    cursor: pointer;
  }

  .flex-item-label {
    color: rgba(0, 0, 0, 0.8470588235);
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: 24px;
    width: 80px;
    text-align: right;
    margin-right: 8px;
    flex: 0 0 80px;
  }

  .flex-container {
    display: flex;
    justify-content: flex-start;
  }

  .box-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .box-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .delete-icon {
    position: absolute;
    top: -5px;
    right: -4px;
    z-index: 100;
    color: #c5c5c5;
    cursor: pointer;
  }

  .box-item-fill {
    margin-right: 8px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .addUseBoxInfo {
    color: #6ba5f6;
    cursor: pointer;
    width: 50px;
    height: 24px;
    display: flex;
    align-items: center;
    margin: 12px 0 10px 0px;
    .addFont {
      margin-left: 3px;
      line-height: 21px;
    }
  }

  .box-contaienr-input {
    display: flex;
    align-items: center;
    width: calc(100% - 48px);
  }

  .add-use-box-info-new {
    color: #6ba5f6;
    cursor: pointer;
    // width: 50px;
    height: 24px;
    display: flex;
    align-items: center;
    margin-left: 4px;
    // flex: 0 0 50px;
    .addFont {
      margin-left: 3px;
      line-height: 24px;
    }
  }
}
.input-number-style {
  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 2px 8px;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
}

.table-header::before {
  content: '*';
  color: #f56c6c;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  position: absolute;
  left: 11px;
}

.table-header-other::before {
  content: '*';
  color: #f56c6c;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  position: absolute;
  left: 22px;
}

:deep(.el-form-item--small .el-form-item__label) {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0px;
}

:deep(.el-input-number--small) {
  width: 100%;
}

:deep(.el-form-item.is-error .el-checkbox__input .el-checkbox__inner) {
  border-color: #f56c6c;
}
:deep(.el-checkbox.el-checkbox--small) {
  margin-right: 12px;
}
</style>
